<script setup>
import { message } from "ant-design-vue";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getForewarnList } from "@/service/services.js";
import { useAccountStore } from "@/stores/account.js";
const account = useAccountStore();
const tableHeight = ref(0);
const code = ref("");
const data = ref([]);
const page = ref(1);
const pageSize = ref(15);
const totals = ref(1);
const pageSizeChange = (current, size) => {
  page.value = current;
  pageSize.value = size;
  getInfo();
};
const pageChange = (current, size) => {
  page.value = current;
  pageSize.value = size;
  getInfo();
};
const pagination = ref({
  // 表格分页的配置
  pageSize,
  current: page,
  total: totals,
  showTotal: (totals) => `共 ${totals} 条`,
  onShowSizeChange: pageSizeChange,
  onChange: pageChange,
});
const columns = [
  {
    title: "操作",
    key: "operation",
    fixed: "left",
  },
  {
    title: "产品编码",
    dataIndex: "code",
    key: "code",
  },
  {
    title: "单户用量",
    dataIndex: "var3",
    key: "var3",
  },
  {
    title: "单层用量",
    dataIndex: "var4",
    key: "var4",
  },
  {
    title: "首层用量",
    dataIndex: "var5",
    key: "var5",
  },
  {
    title: "层数",
    dataIndex: "var6",
    key: "var6",
  },
  {
    title: "公式",
    dataIndex: "var7",
    key: "var7",
  },
  {
    title: "单价",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "预警值",
    dataIndex: "warningValue",
    key: "warningValue",
  },
];
const router = useRouter();
const getInfo = () => {
  account.spinning = true;
  getForewarnList({
    code: code.value,
    pageNum: page.value,
    pageSize: pageSize.value,
  })
    .then((res) => {
      data.value = res.list;
      totals.value = res.total;
      account.spinning = false;
    })
    .catch((err) => {
      account.spinning = false;
      message.error(err);
    });
};
onMounted(() => {
  tableHeight.value = document.getElementById("main").offsetHeight - 220;
  getInfo();
});
watch(
  () => account.currentPrograme,
  (_val, oldVal) => {
    getInfo();
  },
);
const onSearch = () => {
  getInfo();
};
const edit = (i) => {
  console.log(i);
  router.push({ path: "/main/forewarning/edit", query: i });
};
const exportFile = () => {
  window.location.href = `${
    window.origin
  }/services/forewarn/export?token=${sessionStorage.getItem("token")}&code=${
    code.value
  }`;
};
</script>

<template>
  <section class="operation">
    <section class="search">
      <a-input
        v-model:value="code"
        placeholder="请输入产品编码"
        @pressEnter="onSearch"
        :style="{ marginLeft: '10px' }"
      />
    </section>
    <section>
      <a-button
        type="primary"
        @click="onSearch"
        :style="{ marginRight: '10px' }"
        >查询</a-button
      >
      <a-button type="primary" @click="exportFile">导出</a-button>
    </section>
  </section>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :scroll="{ x: 1500, y: tableHeight }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <section class="col">
          <a-button
            type="primary"
            ghost
            :style="{ marginRight: '10px' }"
            @click="edit(record)"
            :disabled="account.level === '3'"
            >修改</a-button
          >
        </section>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.search {
  display: flex;
}
.operation {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.col {
  display: flex;
  align-content: center;
  justify-content: space-between;
}
</style>
